<template>
  <div class="common-layout">
    <el-container>
        <el-aside width="200px">
            <!-- 菜单开始 -->
                 <el-menu :default-openeds="['1', '3']">
            <div>
          <el-sub-menu>
            <template #title>
              <div><el-icon><Odometer /></el-icon></div>仪表盘
            </template>
          </el-sub-menu>
          </div>

          <el-sub-menu index="1">
            <template #title>
              <div><el-icon><Grid /></el-icon></div>常用设置
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">教师管理</el-menu-item>
              <el-menu-item index="1-2">学生管理</el-menu-item>
               <el-menu-item index="1-3">公告管理</el-menu-item>
              <el-menu-item index="1-4">系统配置</el-menu-item>
               <el-menu-item index="1-5">判断服务器</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
       
            
                <el-sub-menu index="2">
                     <template #title>
                    <el-icon><Aim /></el-icon>
                    问题
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">问题列表</el-menu-item>
                        <el-menu-item index="2-2">增加题目</el-menu-item>
                        <el-menu-item index="2-3">导入导出问题</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                 <el-sub-menu index="3">
                      <template #title>
                    <el-icon><Flag /></el-icon>
                    比赛&练习
                    </template>
                     <el-menu-item-group>
                        <el-menu-item index="3-1">比赛列表</el-menu-item>
                        <el-menu-item index="3-2">创建比赛</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                 <el-sub-menu index="4">
                     <template #title>
                    <el-icon><Notebook /></el-icon>
                    课程
                     </template>
                     <el-menu-item-group>
                        <el-menu-item index="4-1">课程列表</el-menu-item>
                        <el-menu-item index="4-2">创建课程</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
               </el-menu> 

        </el-aside> 

            <el-container>
                <el-header><h3>第一个使用布局的页面</h3></el-header>
                <el-main> <p>z这里是主体内容,可以使用组件,也可以写html</p></el-main>
                    <el-footer>
                        web实战课程版权所有
                        <el-button>
                            <el-icon circle type="info"  @click="open">
                                <InfoFilled/>
                            </el-icon>
                        </el-button>
                        </el-footer>
        </el-container>
    </el-container>
  </div>
</template>

<script>
import {Odometer,Grid,Aim,Flag,Notebook,InfoFilled}from'@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
export default {
    components:{
        Odometer,
        Grid,
        Aim,
        Flag,
        Notebook,
        InfoFilled
    },
    methods:{
        open(){
             ElMessage('版权所有不可侵犯,联系方式xxxxxxxxx')
        }
    }
}
</script>

<style>
.el-header,.el-footer{
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 20px;
}
.el-footer{
    text-align: center;
}
.el-aside{
    background-color: #b3dce6;
    text-align: center;
    line-height: 200px;
}
.el-main{
    background-color: #e9eef3;
     text-align: center;
}
</style>